{% extends "_layouts/examples.html" %}
{% block title %}Forms / Validation / Dense{% endblock %}

{% block standalone_css %}patterns_forms{% endblock %}

{% block content %}
  <form>
    <div class="p-form-validation is-error">
      <label for="exampleTextInputError">Email address</label>
      <input class="p-form-validation__input is-dense" type="email" id="exampleTextInputError"
             placeholder="example@canonical.com" name="exampleTextInputError" autocomplete="email" aria-invalid="true"
             aria-describedby="exampleInputErrorMessage"/>
      <p class="p-form-validation__message" id="exampleInputErrorMessage">This field is required.</p>
    </div>

    <div class="p-form-validation is-caution">
      <label for="exampleTextInputCaution">Mail configuration ID</label>
      <input class="p-form-validation__input is-dense" type="text" id="exampleTextInputCaution" placeholder="14"
             name="exampleTextInputCaution" autocomplete="on" aria-describedby="exampleInputCautionMessage"/>
      <p class="p-form-validation__message" id="exampleInputCautionMessage">No validation is performed in preview
        mode.</p>
    </div>

    <div class="p-form-validation is-success">
      <label for="exampleTextInputSuccess">Card number</label>
      <input class="p-form-validation__input is-dense" type="text" id="exampleTextInputSuccess"
             placeholder="**** **** **** ****" name="exampleTextInputSuccess" autocomplete="off"
             aria-describedby="exampleInputSuccessMessage"/>
      <p class="p-form-validation__message" id="exampleInputSuccessMessage">Verified.</p>
    </div>

    {% include "docs/examples/patterns/forms/form-validation-select-wrapper-dense.html" %}
  </form>
{% endblock %}
